import {
  useRef,
  useState,
  forwardRef,
  ForwardedRef,
  useImperativeHandle,
  useContext,
} from 'react';
import { MyContext } from '../../pages/PageView';
import styles from './index.less';
import { Button, Row, Col, Spin } from 'antd';
import { CloseOutlined, createFromIconfontCN } from '@ant-design/icons';
import { useFullscreen } from 'ahooks';
function IndexPage({}, forwardRefref: ForwardedRef<any>) {
  const MyContext1 = useContext(MyContext);
  type extendsFn = {
    id: string;
    name?: string;
    hobbiy: string;
  };

  useImperativeHandle(forwardRefref, () => ({
    open() {
      toggleMinscreen();
    },
  }));

  interface extendsFn2 extends extendsFn {
    card: number;
  }
  // const extendsFn = <T extends extendsFn>(f: T): T => f;
  // let b = extendsFn<extendsFn2>({ id: '1', hobbiy: '3', card: 1 });
  // const name = <T,>(params: T): T => { return params };
  // const fn = (params: number): Number => { return params * 5 };
  // const foo: <T>(params: T) => T = params => { return params };
  // let a = foo<string>('1231')
  // const ad: number = 1;
  const ref = useRef<any>();
  const [left, setLeft] = useState<string>();
  const [top, setTop] = useState<string>();
  const IconFont = createFromIconfontCN({
    scriptUrl: '//at.alicdn.com/t/font_3374167_obgkxrfrzt.js',
  });
  //拖动
  const onMouseDown = (e: any): void => {
    if (e.target.nodeName === 'SPAN' || e.target.nodeName === 'svg') {
      let closeOutlined = document.getElementById('closeOutlined');
      if (closeOutlined) {
        closeOutlined.onclick = () => {
          return;
        };
      }
    } else {
      e.preventDefault();
      setLeft(e.target.getBoundingClientRect().left + 'px');
      setTop(e.target.getBoundingClientRect().top + 'px');
      let left1 = e.clientX - e.target.getBoundingClientRect().left;
      let top1 = e.clientY - e.target.getBoundingClientRect().top;
      document.body.onmousemove = (e2: any) => {
        let left = (e2.clientX - left1).toFixed(0) + 'px';
        let top = (e2.clientY - top1).toFixed(0) + 'px';
        setLeft(left);
        setTop(top);
      };
      document.body.onmouseup = () => {
        document.body.onmousemove = null;
        document.body.onmouseup = null;
      };
    }
  };
  const [isFullscreen, { enterFullscreen, exitFullscreen }] =
    useFullscreen(ref);
  const [min, setMin] = useState(false);
  const toggleMinscreen = () => {
    setMin(true);
    exitFullscreen();
  };
  return (
    <div
      ref={ref}
      style={{ left: left, top: top }}
      className={styles.modalContainer}
    >
      <div onMouseDown={onMouseDown} className={styles.header}>
        <div className={styles.titleText}>标题内容</div>
        <div className={styles.closeOutlined}>
          <IconFont
            type="icon-min"
            className={styles.closeOutlinedItem}
            ref={forwardRefref}
            onClick={toggleMinscreen}
          />
          {isFullscreen || min ? (
            <IconFont
              type="icon-reduction"
              className={styles.closeOutlinedItem}
              onClick={() => {
                exitFullscreen();
                setMin(false);
              }}
            />
          ) : (
            <IconFont
              type="icon-max"
              className={styles.closeOutlinedItem}
              onClick={() => {
                enterFullscreen();
                setMin(false);
              }}
            />
          )}
          <CloseOutlined
            id="closeOutlined"
            className={styles.closeOutlinedItem}
          />
        </div>
      </div>
      {min ? (
        <></>
      ) : (
        <div
          className={`${styles.container} ${
            isFullscreen ? styles.containerMax : ''
          }`}
        >
          <div className={styles.containerBox}>
            <div className={styles.containerContent}>
              {'left' + left}
              <br />
              {'ajax'}
              <br />
              {' top' + top}
            </div>
            <div className={styles.containerFooter}>
              {
                <Row justify="center">
                  <Col span={6}>
                    <Button type="ghost">取消</Button>
                  </Col>
                  <Col>
                    <MyContext.Consumer>{(value) => value}</MyContext.Consumer>
                  </Col>
                  <Col span={6}>
                    <Button type="ghost">确定</Button>
                  </Col>
                </Row>
              }
            </div>
          </div>
        </div>
      )}
    </div>
  );
}
export default forwardRef(IndexPage);
